<template>
	<view>
		<view class="headBox">
			<view class="current">
				<view class="wlIcon-weizhi iconAdd"></view>
				<view class="address">{{address}}</view>
			</view>
			<view class="again" @click="getAdd">重新定位</view>
		</view>
		<map :longitude="longitude" :latitude="latitude"></map>
		<view class="addressList">
			<view class="nullimg" v-if="list.length==0">
				<image :src="common.appUrl.oss+common.imgList.wulist" mode="widthFix" class="select-address"></image>
				<view class="null">暂无收货地址~</view>
				<view class="add" @tap="$wanlshop.auth('/pages/user/address/address')">添加收货地址</view>
			</view>
			<view class="more" v-for="(item,index) in list" @click="selectAddress(item)" v-else>
				<view class="address">
					<view class="title">{{item.address}}</view>
					<view class="name">{{item.province}} {{item.city}} {{item.district}}</view>
				</view>
				<view class="wlIcon-31xuanzhong icons"
					:style="{ color: address_id == item.id ? '#84BD00' : '#D8D8D8' }"></view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				latitude: '',
				longitude: '',
				address: '',
				district: '',
				address_id: 0
			}
		},
		computed: {
			...mapState(['common'])

		},
		onLoad(options) {
			if (options.address_id) {
				this.address_id = options.address_id
			} else {
				this.address_id = uni.getStorageSync('address_id')
			}


			console.log(this.address_id, '88888888888');
			this.longitude = uni.getStorageSync('longitude')
			this.latitude = uni.getStorageSync('latitude')
			uni.request({
				url: '/wanlshop/address/getaddress',
				method: 'GET',
				success: res => {
					console.log(res.data)
					this.list = res.data.data
				}
			});
			this.getDetails(false)
		},
		methods: {
			address(){
					// pages/user/address/address
					
			},
			getColor(item) {
				return item.default == 1 ?
					this.common.modulesData.homeModules.page.style.overallColor :
					'';
			},
			selectAddress(item) {
				console.log(item, '2321321321');
				//拆分经纬度
				const [longitude, latitude] = item.location.split(',');
				this.longitude = longitude;
				this.latitude = latitude;
				uni.setStorageSync('address_id', item.id)
				uni.setStorageSync('longitude', this.longitude)
				uni.setStorageSync('latitude', this.latitude)
				uni.$emit('address', item)
				uni.navigateBack({
					delta: 1
				})
			},
			getAdd() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						// 126.56279 45.80825
						console.log(res, '88888888888888');
						this.longitude = res.longitude
						this.latitude = res.latitude
						uni.setStorageSync('longitude', this.longitude)
						uni.setStorageSync('latitude', this.latitude)

						this.getDetails(true)
					},
					fail: (res) => {
						console.log(res)
						console.log('失败:' + res)
					}
				})
			},
			getDetails(back) {
				var longitude = uni.getStorageSync('longitude')
				var latitude = uni.getStorageSync('latitude')
				var amapKey = '41ed00c06016a4c19834abf849829137'
				const amapUrl =
					`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${longitude},${latitude}&key=${amapKey}`;
				// 发起请求
				uni.request({
					url: amapUrl,
					success: (res) => {
						if (res.statusCode === 200 && res.data.status === '1') {
							console.log('成功获取地址信息:', res.data.regeocode.formatted_address);
							this.address = res.data.regeocode.formatted_address
							var address = res.data.regeocode.addressComponent.district;
							if (address) {
								this.district = address
							} else {
								this.district = res.data.regeocode.formatted_address
							}
							// 返回上一页并传递参数
							if (back) {
								uni.$emit('address', this.district)
								uni.navigateBack({
									delta: 1
								})
							}
						} else {
							console.error('获取地址失败:', res);
						}
					},
					fail(err) {
						console.error('请求失败:', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.headBox {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.current {
			margin-left: 30rpx;
			display: flex;
			align-items: center;

			.iconAdd {
				color: #3D3D3D;
			}

			.address {
				font-size: 30rpx;
				color: #3D3D3D;
				margin-left: 10rpx;
				max-width: 355rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.again {
			font-size: 30rpx;
			color: #84BD00;
			margin-right: 30rpx;
		}
	}

	map {
		width: 100%;
		height: 100vh;
	}

	.addressList {
		position: fixed;
		bottom: 50rpx;
		width: 690rpx;
		max-height: 500rpx;
		overflow: auto;
		left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.nullimg {
			width: 100%;
			height: 500rpx;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;

			image {
				width: 300rpx;
				height: 300rpx;
			}

			.null {
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				color: #999999;
			}

			.add {
				width: 632rpx;
				height: 82rpx;
				border-radius: 50rpx;
				background-color: #84BD00;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin-top: 20rpx;
			}
		}

		.more {
			width: 630rpx;
			padding: 40rpx 0;
			border-bottom: 1px solid #D8D8D8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 30rpx;

			.address {


				.title {
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.name {
					font-size: 26rpx;
					color: #999999;
					margin-top: 20rpx;
				}
			}

			.icons {
				color: #D8D8D8;
				font-size: 30rpx;
			}
		}

		.more:last-child {
			border: 0;
		}
	}
</style>